<template>
	<div id="body">
		<div id="mainBody">
			<!-- <img id="StartLogo" src="../../assets/img/index/StartLogo.gif" > -->
			<div id="maininfo">
				<div id="title">
					<p>Hey！动漫社创立于2013年4月8日，以cosplay、宅舞、摄影、动画漫画编辑技术、 美工、声优、为主要活动的社团。</p>
					<p>Hey！动漫社是一个充满欢乐和无限惊喜的二次元大家庭，无论你有怎样的喜好和性格，你都能找到与我们一起的快乐和属于你的一片天空。</p>
				</div>
				<img class="department" src="../../assets/img/index/department/viewDepartment.gif" >
				<img class="department" src="../../assets/img/index/department/artDepartment.gif" >
				<img class="department" src="../../assets/img/index/department/cvDepartment.gif" >
				<img class="department" src="../../assets/img/index/department/logisticsDepartment.gif" >
					<div id="til" v-if="$store.state.isLogin" >
						<span>你好，{{$store.state.user.nickName}}</span>
						</div>
					<div id="joinUs" v-else @click="toRegister()">
						<img id="joinImg" src="../../assets/img/index/course.png" ><span>加入我们</span>
					</div>
			</div>
		</div>
	</div>
</template>

<script>
	import store from '../../store/index.js'
	import 'bootstrap/dist/css/bootstrap.min.css'
	import 'bootstrap/dist/js/bootstrap.min.js'
	
	
	export default {
		store,
		methods:{
			toRegister(){
				this.$router.push('/Join/Register')
			},
			autoLogin(){
				const xhr = new XMLHttpRequest()
				xhr.onload = () => {
					if(JSON.parse(xhr.responseText).message == 'cookie为空'){
						console.log('用户不存在')
						return
					}
					
					const user = JSON.parse(xhr.responseText)
					this.$store.commit('setUser',user)
					this.checkLogin()
					// this.$router.push('/Admin/Show')
				}
				xhr.open('post','/autoLogin')
				xhr.send()
			},
			checkLogin(){
				this.$store.state.user.account == '' ? this.$store.commit('setLoginState',false)  : this.$store.commit('setLoginState',true)
			}
		},
		created(){
			if(!this.$store.state.isLogin)
				this.autoLogin()
		}
	}
</script>

<style scoped>
	@media only screen and (max-width:768px) {
		body,html{
			width: 100%;
			height: 100%;
			/* background-color: pink; */
			padding: 0;
			margin: 0;
		}
		#body{
			background: url(../../assets/img/index/bg.jpg) no-repeat;
			position: absolute;
			padding: 0;
			margin: 0;
			margin-bottom: 50px;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -2;
		}
		p{
			text-indent: 2em;
		}
		a{
			text-decoration: none;
			color: #000;
		}
		#begin{
			display: flex;
			height: 100%;
			width: 100%;
			top: 0;
			z-index: 10;
			background-color: #fff;
			position: absolute;
			animation: logoOut 2s 2s;
			animation-fill-mode: forwards;
		}
	
		#indexLogo{
			margin: auto;
		}
		#logoimg{
			display: block;
			margin: auto;
			width: 100%;
			max-width: 100%;
			max-height: 100%;
			animation: fadeIn 2.5s;
			animation-fill-mode: forwards;
		}
		#mainBody{
			width: 100%;
		}
		
		#headerimg{
			max-width: 100%;
			max-height: 100%;
		}
		
		/* #StartLogo{
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			max-width: 100%;
			max-height: 100%;
			opacity:0.85;
			animation:fadeIn 2s , StartLogoOut 1s 1.5s;
			animation-fill-mode: forwards;
		} */
		#maininfo{
			margin-top: 45%;
			opacity: 0;
			/* animation: fadeIn 1s 2.5s; */
			animation: fadeIn 1s;
			animation-fill-mode: forwards;
		}
		#title{
			width: 80%;
			margin: auto;
		}
		.department{
			max-width: 45%;
			max-height: 100%;
			margin-top: 5%;
			margin-left: 3%;
		}
		#joinUs{
			/* position: relative; */
			width: 60%;
			margin: auto;
			margin-top: 10%;
			bottom: -30px;
			clear: both;
		}
		#joinImg{
			float: left;
			max-width: 25%;
			max-height: 25%;
			animation: Xrotate 3s infinite linear;
		}
		span{
			font-size: 2.5em;
		}
		#til{
			width: 100%;
			margin: auto;
			margin-top: 10%;
			bottom: -30px;
			text-align: center;
			clear: both;
		}
		/* 进入时logo出现的动画 */
		@keyframes fadeIn{
			from{opacity: 0;}
			to{opacity: 1;}
		}
		/* 进入时logo退出的动画 */
		@keyframes logoOut{
			from{}
			to{top:-100%}
		}
		/* 首页中StartLogo退出的动画 */
		@keyframes StartLogoOut{
			from{}
			to{opacity: 0;display: none;z-index: -10;}
		}
		@keyframes Xrotate{
			from{}
			50%{transform: rotateX(180deg);}
			to{transform: rotateX(360deg);}
		}
	}
</style>
